<!-- 
author :Warren
http://www.wglong.com
 -->
<!DOCTYPE HTML>
<html>
<head>
<title>Warren-JQM实战Demo-IOSTheme</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport"
			content="user-scalable=no, width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./css/frame/jquery.mobile-1.3.0.min.css">
		<link rel="stylesheet" href="./css/frame/ios_inspired/styles.css"
			rel="stylesheet" />
		<link rel="stylesheet" href="./css/global.css">
		<script type="text/javascript" charset="utf-8"
			src="./js/frame/iscroll.js"></script>
		<script type="text/javascript" charset="utf-8"
			src="./js/frame/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" charset="utf-8"
			src="./js/frame/jquery.mobile-1.3.0.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="./js/global.js"></script>

</head>

<body>
	<div data-role="page" id="aboutPage">
	<script type="text/javascript">
		$("#aboutPage").live('pageinit', function() {
		});
		$("#aboutPage").live('pageshow', function() {
		});
	</script>
		<div data-role="header"  data-position="fixed" data-theme="b">
			<h1>IOS-theme&Panels</h1>
		</div>
		<div data-role="content">
			<h3>Panels:</h3>
			<a href="#leftpanel3" data-role="button" data-inline="true" data-mini="true">Overlay</a>
			<a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a>
			<a href="#leftpanel2" data-role="button" data-inline="true" data-mini="true">Push</a>
			<h3>弹出框:</h3>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
			<h3>IOS-theme组件展示:</h3>
			<a href="iOS-Inspired.html" data-role="button"  data-inline="true" data-ajax="false">走起</a>
		</div>
		
			<!-- leftpanel1  -->
	<div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a">

        <h3>Left Panel: Reveal</h3>
        <p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>
     </div>
     <!-- leftpanel3  -->
	<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">

        <h3>Left Panel: Overlay</h3>
        <p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>

	</div><!-- /leftpanel3 -->
<!-- leftpanel2  -->
	<div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-theme="a">

        <h3>Left Panel: Push</h3>
        <p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>

	</div><!-- /leftpanel2 -->
	
		<div id="footer" class="nav-style" data-role="footer" data-theme="a"
				data-position="fixed">
				<div data-role="navbar" data-grid="c" class="nav-style">
					<ul>
						<li>
							<a href="#" id="skull" data-icon="custom"  onclick="goTo('content.html')">&nbsp;</a>
						</li>
						<li class="ui-btn-active">
							<a href="#" id="chat" data-icon="custom">&nbsp;</a>
						</li>
						<li>
							<a href="#" id="email" data-icon="custom"  onclick="goTo('content1.html')">&nbsp;</a>
						</li>
						<li>
							<a href="#" id="beer" data-icon="custom" onclick="goTo('content2.html')">&nbsp;</a>
						</li>
					</ul>
				</div>
		</div>
	</div>
</body>

</html>